<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="景点名称">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="景点地址">
        <el-input v-model="form.addr"></el-input>
      </el-form-item>
      <el-form-item label="景点门票">
        <el-input
          type="number"
          v-model="form.price"
          placeholder="门票价格"
        ></el-input>
      </el-form-item>
     <el-form-item label="游玩时间">
        <el-input v-model="form.playTime"></el-input>
      </el-form-item>
      <el-form-item label="开放时间-结束时间">
        <el-input v-model="form.openTime"></el-input>
      </el-form-item>
       <el-form-item label="历史文化">
          <el-input
            type="textarea"
            :rows="5"
            v-model="form.culture"
          />
      </el-form-item>
      <el-form-item label="历史故事">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="历史故事"
            v-model="form.history"
          />
      </el-form-item>
      <el-form-item label="简介">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="简介"
            v-model="form.descript"
          />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="selectString" value-key="id" @change="changeValue">
          <el-option
            v-for="item in selectArr"
            :label="item.name"
            :key="item.id"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- TODO 景点图片 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import scenic from '@/api/travel/scenic/scenic'

export default {
    
  data() {
    return {
      selectString: "请选择",
      selectArr: [
        { id: 1, name: "正常" },
        { id: 2, name: "停用" },
        { id: 3, name: "删除" }
      ],
      form: {
        id: 1,
        title: "名称",
        addr: "地址",
        price: 0,
        playTime: "12",
        openTime: "00:00-12:00",
        culture: "文化",
        history: "历史",
        descript: "描述",
        status: 0,
        imgList:[]
      },
    };
  },
  create() {
      this.init();
  },

  //路由监听
  watch:{
      //路由变化，以下方法执行
      $route(to,from){
        this.init();
      }
  },
  beforeRouteEnter(to, from, next) {
    // console.log(this, 'beforeRouteEnter'); // undefined
    // console.log(to, '组件独享守卫beforeRouteEnter第一个参数');
    // console.log(from, '组件独享守卫beforeRouteEnter第二个参数');
    // console.log(next, '组件独享守卫beforeRouteEnter第三个参数');
    next(vm => {
      //因为当钩子执行前，组件实例还没被创建
      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
      console.log(vm);//当前组件的实例
      vm.init();
    });
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      scenic.updateScenicSpot(this.form).then(response =>{
        //提示成功
        this.$message({
                type: 'success',
                message: '修改景点信息成功!'
        });
        //跳转回首页
        this.$router.push({path:'/scenic/list/'})
      })
    },
    //修改下拉选择
    changeValue(value) {
      console.log(value);
      console.log(this.selectString);
      this.form.status = value.id;
      console.log(this.searchScenic);
    },
    //初始化
    init(){
        //判断路径是否有id值
        if(this.$route.params && this.$route.params.id){
            this.form.id = this.$route.params.id
            this.getScenicInfoById(this.form.id)
        }
    },
    getScenicInfoById(id){
        scenic.getScenicInfoById(id).then(response =>{
          console.log(response);
            this.form = response.data.data[0];
            //设置下拉框显示
            if(this.form.status == 1){
              this.selectString = "正常"
            }else if(this.form.status ==2){
              this.selectString = "停用"
            }else{
              this.selectString = "删除"
            }
            
        })
    }
  },
};
</script>